<template>
    <p style="line-height: 3.125rem;font-size: 1rem;font-weight: bold;" class="main_text">计量单位配置</p>
    <div class="main">
        <!-- ############################################## 表单 ############################################## -->
        <div class="content p20">
            <div>
                <el-button type="primary" @click="RucenterDialogVisible = true">添加计量单位</el-button>
                <el-button type="primary" plain>批量删除</el-button>
            </div>
            <el-scrollbar height="416px">
                <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%" class="mt20"
                    :header-cell-style="{ 'background': '#f0f6fe' }" border>
                    <el-table-column type="selection" width="50" />
                    <el-table-column label="编号" prop="id" />
                    <el-table-column label="计量单位名称" prop="name" />
                    <el-table-column label="是否启用">
                        <template #default="props">
                            <el-switch v-model="value1" />
                        </template>
                    </el-table-column>
                    <el-table-column label="添加时间" prop="name" />
                    <el-table-column label="更新时间" prop="name" />
                    <el-table-column label="操作">
                        <template #default="props">
                            <el-button size="small" link type="primary"
                                @click="EditcenterDialogVisible = true">编辑</el-button>
                            <el-button size="small" link type="primary">删除</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="name" />

                </el-table>
            </el-scrollbar>
        </div>
        <!-- ############################################## 蒙层 ############################################## -->
        <!-- ****************************** 添加计量单位 ****************************** -->
        <el-dialog v-model="RucenterDialogVisible" title="添加计量单位" width="30%" align-center>
            <el-form :model="putInData" label-width="8.125rem">
                <el-form-item label="仓库名称：">
                    <el-input v-model="AddData.name" placeholder="仓库名称：" style="width: 80%;" />
                </el-form-item>
                <el-form-item label="备注说明：">
                    <el-input v-model="putInData.racks" type="textarea" placeholder="putInData" style="width: 80%;" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="RucenterDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="RucenterDialogVisible = false">
                        添加
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- ****************************** 编辑计量单位 ****************************** -->
        <el-dialog v-model="EditcenterDialogVisible" title="编辑计量单位" width="30%" align-center>
            <el-form :model="putInData" label-width="8.125rem">
                <el-form-item label="仓库名称：">
                    <el-input v-model="AddData.name" placeholder="仓库名称：" style="width: 80%;" />
                </el-form-item>
                <el-form-item label="备注说明：">
                    <el-input v-model="putInData.racks" type="textarea" placeholder="putInData" style="width: 80%;" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="EditcenterDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="EditcenterDialogVisible = false">
                        添加
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const tableData = ref<any>([
    {
        id: 99,
        name: '132',
        bh: '456',
        dz: '成都市武侯区益州大道999号',
        mj: '798',
        fzr: '王五',
        dh: '17326544352',
        status: '1',
    }, {
        id: 99,
        name: '132',
        bh: '456',
        dz: '成都市武侯区益州大道999号',
        mj: '798',
        fzr: '王五',
        dh: '17326544352',
        status: '1',
    }, {
        id: 99,
        name: '132',
        bh: '456',
        dz: '成都市武侯区益州大道999号',
        mj: '798',
        fzr: '王五',
        dh: '17326544352',
        status: '1',
    }, {
        id: 99,
        name: '132',
        bh: '456',
        dz: '成都市武侯区益州大道999号',
        mj: '798',
        fzr: '王五',
        dh: '17326544352',
        status: '1',
    },
])
const value1 = ref(true)

const AddData = ref<any>({
    name: 'add',
    area: '',
    racks: '',
})
const putInData = ref<any>({
    name: '',
    area: '',
    racks: '',
})
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
const RucenterDialogVisible = ref<any>(false)
const EditcenterDialogVisible = ref<any>(false)


</script>

<style scoped lang="scss">
.main {
    width: 100%;

    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

/* 弹出框样式 */
::v-deep .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;
}

::v-deep .el-dialog__title {
    color: #fff;
}

// ::v-deep .el-icon svg {
//     color: #fff;
// }
</style>
